<template>
	<view class="winterSummerCamps">
		<view class="nav_bar">
			<uni-nav-bar statusBar fixed :border="false" @clickLeft="back">
				<block slot="left">
					<view class="back_btn">
						<uni-icons type="back" color="#fff" size="20"></uni-icons>
					</view>
				</block>
			</uni-nav-bar>
		</view>
		<view class="banner">
			<image :src="topImgList.pic" mode=""></image>
			<view class="">
				<view class="title">{{topImgList.title}}</view>
				<view class="desc">{{topImgList.content}}</view>
				<view class="search_box">
					<uni-icons type="search" size="20"></uni-icons>
					<input type="text" placeholder="搜索关键词" v-model="keywords" @confirm="onSearch()"
						placeholder-class="font-size:26rpx;color:#808080;" />
				</view>
				<view class="tabs">
					<block v-for="(item,i) in tabs" :key="i">
						<view :class="{'active':currentType==i}" @tap="onChangeTab(i)">{{item.name}}</view>
					</block>
				</view>
			</view>
		</view>
		<view class="activity_list">
			<productList :list="list" :noMoreData="noMoreData"></productList>
		</view>
	</view>
</template>

<script>
	import productList from "../../../components/productList/productList.vue"
	export default {
		components: {
			productList
		},
		data() {
			return {
				topMsg: {},
				topImgList: [],
				keywords: '',
				tabs: [],
				currentType: 0,
				page: 1,
				lastPage: 1,
				noMoreData: false,
				list: [],
			};
		},
		onShow() {
			this.getImg()
			this.getClassyfy()
		},
		onReachBottom() {
			if (this.page < this.lastPage) {
				this.page += 1
				this.getActivities()
			} else {
				this.noMoreData = true
			}
		},
		watch: {
			keywords(item1, item2) {
				if (item1 == '') {
					setTimeout(() => {
						this.onSearch()
					}, 500)
				}
			}
		},
		methods: {
			async getImg() {
				// 0首页 1研学 2冬夏令营 3红领巾 4托管 5心理测评
				const res = await this.$api.get(`image/get/2`, {});
				console.log(res, "令营")
				if (res.code == 200) {
					// this.topMsg = res.data
					// this.topImgList = res.data.image.split(',')
					this.topImgList = res.data.bastBanner[0]
				}
			},
			onSearch() {
				this.page = 1
				this.getActivities()
			},
			async getActivities() {
				const res = await this.$api.get('competition/week/list', {
					activity: 4,
					categoryId: this.tabs[this.currentType].id,
					page: this.page,
					keywords: this.keywords,
					limit: 10,
					type: 0, //0=本周 1=往期
				});
				// console.log(res, "冬夏令营")
				if (res.code == 200) {
					const {
						list,
						totalPage
					} = res.data
					if (this.page == 1) {
						this.list = list || [];
						this.lastPage = totalPage || 1;
					} else {
						this.list.push(...list);
					}
					this.page != 1 && list.length == 0 ? this.noMoreData = true : this.noMoreData = false
				}
			},
			async getClassyfy() {
				// 0=赛事, 1=党建，2=团建，3=研学产品，4=冬夏令营，5=红领巾博物馆 6=托管服务
				const res = await this.$api.get(`team/category/4`, {});
				// console.log(res, "11111--")
				if (res.code == 200) {
					this.tabs = res.data
					this.getActivities()
				}
			},
			onChangeTab(i) {
				this.keywords = ''
				this.currentType = i
				this.page = 1
				this.getActivities()
			},
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f7f7f7;
	}

	.activity_list {
		width: 100%;
		padding: 0 26rpx 30rpx;
		box-sizing: border-box;
		position: absolute;
		left: 0;
		right: 0;
		z-index: 3;
		top: 576rpx
	}

	.winterSummerCamps {
		.nav_bar {
			width: 100%;
			position: fixed;
			top: 0;
			left: 0;
			right: 0;
			z-index: 99;

			/deep/.uni-navbar {
				// opacity: 0;
				.uni-navbar__content {
					background-color: transparent !important;

					.uni-navbar__header {
						background-color: transparent !important;
					}
				}
			}

			.back_btn {
				width: 54rpx;
				height: 54rpx;
				border-radius: 50%;
				display: flex;
				justify-content: center;
				align-items: center;
				background-color: rgba(0, 0, 0, 0.4);
			}
		}

		.banner {
			width: 100%;
			height: 600rpx;
			position: relative;

			image {
				width: 100%;
				height: 600rpx;
			}

			>view {
				width: 100%;
				height: 100%;
				position: absolute;
				left: 0;
				right: 0;
				top: 0;
				bottom: 0;
				z-index: 2;
				padding: 232rpx 26rpx 0;
				box-sizing: border-box;

				.title {
					font-size: 52rpx;
					font-weight: bold;
					color: #fff;
					line-height: 52rpx;
				}

				.desc {
					font-size: 26rpx;
					color: #fff;
					padding: 28rpx 0 36rpx;
				}

				.search_box {
					width: 100%;
					height: 66rpx;
					background-color: #f7f7f7;
					border-radius: 6rpx;
					display: flex;
					align-items: center;
					padding: 0 38rpx;
					box-sizing: border-box;
					margin-bottom: 20rpx;

					input {
						flex: 1;
						height: 100%;
						margin-left: 12rpx;
					}
				}

				.tabs {
					width: 100%;
					padding: 0 74rpx;
					box-sizing: border-box;
					display: flex;
					justify-content: space-between;

					>view {
						width: 212rpx;
						height: 80rpx;
						background-color: #fff;
						text-align: center;
						line-height: 80rpx;
						font-size: 32rpx;
						font-weight: bold;
						border-radius: 14rpx;
					}

					.active {
						color: #2E80FE;
						position: relative;
					}

					.active::before {
						height: 0;
						width: 0;
						border-left: 20rpx solid transparent;
						border-right: 20rpx solid transparent;
						border-top: 20rpx solid #fff;
						position: absolute;
						display: block;
						content: '';
						bottom: -16rpx;
						left: 86rpx;
					}
				}
			}
		}

	}
</style>